<template>
    <div class="academic-page">
      <div class="page-header">
        <h2>学工系统</h2>
        <p>学生学业管理与服务平台</p>
      </div>
  
      <!-- 模块导航 -->
      <div class="module-tabs" v-if="userInfo.id">
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
          <el-tab-pane label="课程中心" name="course">
            <CourseCenter :studentId="userId" v-if="role === 'STUDENT'" />
            <TeacherCourseManagement :teacherId="userId" v-else-if="role === 'TEACHER'" />
            <AdminCourseManagement v-else-if="role === 'ADMIN'" />
          </el-tab-pane>
          <el-tab-pane label="成绩管理" name="grade">
            <GradeManagement :userId="userId" :role="role" />
          </el-tab-pane>
          <el-tab-pane label="学业预警" name="warning">
            <AcademicWarning :studentId="userId" :role="role" />
          </el-tab-pane>
          <el-tab-pane label="请假管理" name="leave">
            <LeaveManagement :studentId="userId" v-if="role === 'STUDENT'" />
            <TeacherLeaveManagement :teacherId="userId" v-else-if="role === 'TEACHER'" />
            <AdminLeaveManagement v-else-if="role === 'ADMIN'" />
          </el-tab-pane>
          <el-tab-pane v-if="role === 'TEACHER'" label="职称评审" name="graduation">
            <TitleApplication :teacherId="userId" />
          </el-tab-pane>
          <el-tab-pane v-else-if="role === 'STUDENT'" label="毕业管理" name="graduation">
            <GraduationManagement :studentId="userId" :role="role" />
          </el-tab-pane>
          <el-tab-pane v-else-if="role === 'ADMIN'" label="毕业管理" name="graduation">
            <GraduationManagement :role="role" />
          </el-tab-pane>
          <el-tab-pane v-if="role === 'STUDENT' || role === 'TEACHER' || role === 'ADMIN'" label="补考管理" name="makeup-exam">
            <MakeupExamManage v-if="role === 'STUDENT' || role === 'TEACHER'" :userId="userId" :role="role" />
            <AdminMakeupExamManage v-else-if="role === 'ADMIN'" />
          </el-tab-pane>
          <el-tab-pane v-if="role === 'ADMIN'" label="职称评审" name="title-application">
            <AdminTitleApplication />
          </el-tab-pane>
        </el-tabs>
      </div>
  
      <!-- 加载中提示 -->
      <div v-else class="loading">
        正在加载用户信息，请稍候...
      </div>
    </div>
  </template>
  
  <script>
  import { ref, onMounted, onUnmounted } from 'vue'
  import CourseCenter from '@/components/academic/CourseCenter.vue'
  import TeacherCourseManagement from '@/components/academic/TeacherCourseManagement.vue'
  import AdminCourseManagement from '@/components/academic/AdminCourseManagement.vue'
  import GradeManagement from '@/components/academic/GradeManagement.vue'
  import AcademicWarning from '@/components/academic/AcademicWarning.vue'
  import LeaveManagement from '@/components/academic/LeaveManagement.vue'
  import TeacherLeaveManagement from '@/components/academic/TeacherLeaveManagement.vue'
  import AdminLeaveManagement from '@/components/academic/AdminLeaveManagement.vue'
  import GraduationManagement from '@/components/academic/GraduationManagement.vue'
  import TitleApplication from '@/components/academic/TitleApplication.vue'
  import AdminTitleApplication from '@/components/academic/AdminTitleApplication.vue'
  import MakeupExamManage from '@/components/academic/MakeupExamManage.vue'
  import AdminMakeupExamManage from '@/components/academic/AdminMakeupExamManage.vue'
  import { useStore } from 'vuex'
  import { useRoute } from 'vue-router'
  
  export default {
    name: 'AcademicView',
    components: {
      CourseCenter,
      TeacherCourseManagement,
      AdminCourseManagement,
      GradeManagement,
      AcademicWarning,
      LeaveManagement,
      TeacherLeaveManagement,
      AdminLeaveManagement,
      GraduationManagement,
      TitleApplication,
      AdminTitleApplication,
      MakeupExamManage,
      AdminMakeupExamManage
    },
    setup() {
      const activeTab = ref('course')
      const store = useStore()
      const route = useRoute()
      
      // 从Vuex获取用户信息
      const userInfo = ref(store.state.user.userInfo || {})
      const userId = ref(userInfo.value.id || '')
      const role = ref(userInfo.value.role || 'STUDENT')
      
      console.log('当前用户信息:', userInfo.value)
      console.log('用户ID:', userId.value)
      console.log('用户角色:', role.value)
      
      const handleTabClick = (tab) => {
        console.log('切换到标签:', tab.props.name)
      }
      
      let timer = null
      onMounted(() => {
        // 如果路由中有指定标签，则切换到该标签
        if (route.query.tab && ['course', 'grade', 'warning', 'leave', 'graduation', 'makeup-exam', 'title-application'].includes(route.query.tab)) {
          console.log('从URL参数切换到标签:', route.query.tab);
          activeTab.value = route.query.tab;
          
          // 如果是切换到补考管理页面，并且有studentId或courseId参数，记录日志
          if (route.query.tab === 'makeup-exam' && (route.query.studentId || route.query.courseId)) {
            console.log('补考管理页面参数:', {
              studentId: route.query.studentId,
              courseId: route.query.courseId
            });
          }
        }
        // 移除无实际定义的定时器逻辑
      })
      onUnmounted(() => {
        if (timer) clearInterval(timer)
      })
      
      return {
        activeTab,
        userId,
        role,
        userInfo,
        handleTabClick
      }
    }
  }
  </script>
  
  <style scoped>
  .academic-page {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .page-header {
    text-align: center;
    margin-bottom: 40px;
  }
  
  .page-header h2 {
    color: var(--text-color);
    margin-bottom: 8px;
    font-size: 28px;
  }
  
  .page-header p {
    color: var(--text-color-secondary);
    font-size: 16px;
  }
  
  .module-tabs {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
  
  .loading {
    text-align: center;
    font-size: 18px;
    color: #999;
    padding: 50px 0;
  }
  </style>
  